{strip}
{literal}
<style type="text/css">
	label.error { float: right; color: red; padding-left: .5em; vertical-align: top; }
	p { margin-bottom: 10px;clear: both; }
	em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>

<script>
jQuery.validator.setDefaults({
	debug: true,
	success: "valid"
});

$(document).ready(function() {
	//$('#users_add_form').validate();
	var options = { 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse  // post-submit callback 
    }; 
 
    $("#usernameForm").validate({
   		
		onkeyup: false,
		
    	submitHandler: function(form) {
   			$(form).ajaxSubmit(options);
   		},

   		messages: {
			'addForm[username]': {
				minlength: 6,
				remote: jQuery.validator.format("{0} is already taken, please enter a different username.")	
			}
		}

	});
  
});

// pre-submit callback 
function showRequest(formData, jqForm, options) { 
    var queryString = $.param(formData); 
    //return checkForm(); 
} 
 
// post-submit callback 
function showResponse(responseText, statusText)  { 
	var obj = jQuery.parseJSON(responseText);
	alert('Username has been changed for '+obj.username);
	window.location.reload();
}
</script>
{/literal}
<form id="usernameForm" method="POST" action="/account/save-username" onsubmit="">
	<p>
		<label for="f3">Username</label>
		<input id="f3" type="text" remote="/index/validate-username" name="addForm[username]" value="{$user->getUsername()}" class="required" minlength="6"/><em>*</em>
	</p>
	<div class="v_spacer"> </div>
	<div>
		<div class="left">
			<input type="button" value="Resign" class="submit" onclick="closePopup();"/>
		</div>
		<div class="right">
			<input type="submit" value="Submit" class="submit"/>
		</div>
	</div>
</form>
{/strip}